<template>
    <div class="search-result">
        <ItemDetail :show.sync="showModal" :value="item" title="Item" :id="itemID" :action="action" :height="600">
        </ItemDetail>
        <div class="row">
            <div class="col-md-12">
                <div class="white-box">
                    <h3 class="box-title">Search Here</h3>
                    <form class="form-group" role="search">
                        <div class="input-group">
                            <input type="text" @keydown.enter.stop="to" v-model="keyWord" class="form-control"
                                   placeholder="Type host_name/reservation_code/physical_room_id/logical_room_id">
                            <span class="input-group-btn" @click="to">
                                <button type="button" class="btn waves-effect waves-light btn-info">
                                <i class="fif fif-search"></i></button>
                            </span>
                        </div>
                    </form>
                    <h2 class="m-t-40">Search Result For "{{this.keyWord}}"</h2>
                    <small>About {{results.length}} results</small>
                    <hr>
                    <ul class="search-listing" style="position: relative">
                        <loading :show="loading"></loading>
                        <li :key="'result' + index"  v-for="(item, index) in results">
                            <h3><a href="javacript:void(0)" @click="editItem(item)">{{item.title}}</a></h3>
                            <a href="javascript:void(0)" class="search-links">{{item.digest}}</a>
                            <p>
                                {{item.type}}
                                <a v-if="['PhysicalRoom', 'LogicalRoom'].indexOf(item.type) !== -1 "
                                   href="javascript:void(0);"
                                   @click.stop="toCalendar(item.type, item.id)">
                                    <i class="fif fif-calendar text-warning"></i>
                                </a>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ItemDetail from '@/components/widgets/ItemDetail'
    import Loading from '@/components/widgets/Loading'
    import {generalSearch} from "@/api/auth";
    import {getModel} from '@/api/model'

    export default {
        name: 'SearchResult',
        components: {Loading, ItemDetail},
        created() {
            this.keyWord = this.$route.hash.length ? this.$route.query.key + this.$route.hash : this.$route.query.key
        },
        mounted() {
            this.fetch()
        },
        data() {
            return {
                loading: false,
                keyWord: '',
                results: [],

                showModal: false,
                itemID: null,
                item: null,
                action: 'show',
            }
        },
        methods: {
            to() {
                // this.$route.query.key = this.keyWord
                history.pushState({}, '', `#/search?key=${this.keyWord}`);
            },
            fetch() {
                if (this.keyWord && !this.loading) {
                    this.loading = true
                    generalSearch(this.keyWord).then(res => {
                        this.loading = false
                        this.results = res.data
                    }).catch(e => {
                        this.loading = false
                    })
                }
            },
            editItem(row) {
                if (!row.id) {
                    return
                }
                this.model = row.type
                this.itemID = row.id
                this.tableLoading = true
                getModel(row.type, null, {id: row.id}).then(res => {
                    this.tableLoading = false
                    if (!res.data.list.length) {
                        return false
                    }
                    this.origin = res.data.list[0]
                    let item = []
                    let fields = {}
                    for (let key in this.origin) {
                        let i = item.length
                        fields[key] = i
                        item[i] = {key: key, value: this.origin[key], label: key}
                    }
                    for (let i = 0; i < item.length; i++) {
                        if (item[i].inputType === 'reversecheckbox') {
                            item[i].value = !item[i].value
                        }
                    }
                    this.item = item
                    this.showModal = true
                }).catch(e => {
                })
            },
            toCalendar(type, id) {
                this.tableLoading = true
                getModel(type, null, {id}).then(res => {
                    this.tableLoading = false
                    if (!res.data.list.length) {
                        return false
                    }
                    let data = res.data.list[0]
                    let url = type === 'PhysicalRoom' ? `#/physicalroomcalendar/${data.physical_room_id}` : `#/logicalroomcalendar/${data.logical_room_id}`
                    window.open(url)

                }).catch(e => {
                })
            },
        },
        watch: {
            '$route'() {
                this.keyWord = this.$route.query.key
                this.fetch()
            },
        }
    }
</script>

<style scoped></style>